<template>
	<view class="package">
		<block v-if="show">
			<view class="package-nav">
				<view class="price-sort">
					<view 
						class="price-sort-item" 
						@click="choseLabel(data.level_id)" 
						:class="{active: pricelevIndex===data.level_id}" 
						v-for="(data,index) in pricelev" 
						:key="index">{{data.label_name}}</view>
				</view>
				<view class="customTabs">
					<u-tabs
						:list="sortList"
						:current="sortIndex"
						@change="sortTabChange"
						active-color="#141414"
						inactive-color="#666666"
						name="style_name"
						font-size="24"
						:show-bar="false"
						height="44rpx"
						:bold="false"
						:active-item-style="{backgroundColor: '#F59359',color: '#FFF',height: '44rpx',lineHeight: '44rpx'}">
					</u-tabs>
				</view>
			</view>
			<view class="n98-package">
				<!-- <view class="package-price-lev">
					<text v-for="(data,index) in pricelev" :key="index" @click="choseLabel(index)" :class="{active: pricelevIndex===index}">
						{{data.label_name}}
					</text>
				</view> -->
				<view :class="['n98-package-item',{padding: type==2}]" v-for="(data,index) in packageList" :key="index" @click.stop="goGroupInfo(data.group_id)">
					<image :lazy-load="true" :src="data.image" class="mainImg" mode="widthFix"></image>
					<!-- <view class="n98-package-goods-list" v-if="type==1">
						<scroll-view scroll-x class="n98-package-goods">
							<view class="n98-package-goods-item" v-for="(item,i) in data.goods_list" :key="i" @click.stop="goProInfo(item.goods_id)">
								<image :lazy-load="true" :src="item.image" mode="aspectFit"></image>
							</view>
						</scroll-view>
					</view> -->
					<view class="n98-package-item-bot">
						<view class="n98-package-item-bot-info">
							<view class="n98-package-item-bot-info-tit"><text :class="'level_id_'+data.level_id">{{data.label_name}}</text>{{data.group_name}}</view>
							<view class="n98-package-item-bot-info-price">
								<view class="orange">
									<text class="label">总额：</text>
									<block v-if="isLogin">￥<text class="price">{{data.retail_price}}</text></block>
									<pt-noLogin v-else></pt-noLogin>
								</view>
								<view>{{data.remark}}<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow.png"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && packageList.length"></pt-nomore>
			<block v-if="type==1 && noMore && !packageList.length">
				<pt-nothing 
					text="暂无N98套餐" 
					:fixed="true" 
					top="185"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</block>
			<block v-if="type==2 && noMore && !packageList.length">
				<pt-nothing 
					text="暂无全屋套餐" 
					:fixed="true" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</block>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				top: 0,
				type: '',
				sortIndex: 0,
				style_id: '',
				page: 0,
				sortList: [],
				packageList: [],
				isLoading: false,
				noMore: false,
				// 足迹参数
				is_home_jump: false,
				is_shelf: false,
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				pricelevIndex: 0,
				pricelev: [],
				isLogin: false
			};
		},
		onLoad(options) {
			if(options.is_home_jump){
				this.is_home_jump = options.is_home_jump
			}
			if(options.is_shelf){
				this.is_shelf = options.is_shelf
			}
			this.type = options.type
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			if(options.type==1){
				uni.setNavigationBarTitle({
					title: 'N98套餐列表'
				})
			}else{
				uni.setNavigationBarTitle({
					title: '全屋套餐列表'
				})
			}
			this.init()
			this.getGroupLabel()
		},
		onShow() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		methods: {
			getGroupLabel(){
				this.$u.api.GroupLabel().then(res => {
					this.pricelev = res.datas
				})
			},
			init(){
				if(this.type==1){
					this.$u.api.GroupItems({is_house: this.type, page: this.page,style_id: this.style_id,order_by: 'sort',asc: 2,level_id: this.pricelevIndex?this.pricelevIndex:''}).then(res => {
						this.show = true
						this.isLoading = false
						if(!this.sortList.length){
							this.sortList = res.datas.style_list
						}
						let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
						if(res.datas.list.length){
							res.datas.list.forEach(item => {
								this.packageList.push(item)
							})
							this.$u.mpShare = {
								title: 'N98套餐',
								path: '/pages/package/package?type=1&parent_id=' + user_id,
								imageUrl: this.packageList[0].image
							}
						}else{
							this.noMore = true
						}
					})
				}else{
					this.$u.api.GroupList({is_house: this.type,page: this.page,style_id: this.style_id, order_by: 'sort', asc: 2,level_id: this.pricelevIndex?this.pricelevIndex:''}).then(res => {
						this.show = true
						this.isLoading = false
						if(!this.sortList.length){
							this.sortList = res.datas.style_list
						}
						if(res.datas.list.length){
							res.datas.list.forEach(item => {
								this.packageList.push(item)
							})
							this.$u.mpShare = {
								title: '全屋套餐',
								path: '/pages/package/package?type=2&parent_id=' + user_id,
								imageUrl: this.packageList[0].image
							}
						}else{
							this.noMore = true
						}
						let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					})
				}
			},
			sortTabChange(e){
				this.sortIndex = e
				this.page = 0
				this.noMore = false
				this.packageList = []
				this.style_id = this.sortList[e].style_id?this.sortList[e].style_id:''
				this.init()
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			goGroupInfo(group_id){
				if(this.type==1){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/n98-info?group_id='+group_id
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/house-info?group_id='+group_id
					})
				}
				if(this.is_home_jump){
					let name = this.type==1?'首页-空间-全屋套餐-列表-详情':'首页-空间-N98套餐-列表-详情'
					this.addFoot(name)
					
					this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
					this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
					let jumpName = this.type==1?'首页-空间-全屋套餐-列表':'首页-空间-N98套餐-列表'
					this.addFoot(jumpName)
				}
				if(this.is_home_jump){
					let name = this.type==1?'货架-全屋套餐-列表-详情':'货架-N98套餐-列表-详情'
					this.addFoot(name)
					
					this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
					this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
					let jumpName = this.type==1?'货架-全屋套餐-列表':'货架-N98套餐-列表'
					this.addFoot(jumpName)
				}
			},
			// 足迹
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			choseLabel(level_id){
				if(this.pricelevIndex===level_id){
					this.pricelevIndex = 0
				}else{
					this.pricelevIndex = level_id
				}
				this.page = 0
				this.noMore = false
				this.packageList = []
				this.init()
			}
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					let name = this.type==1?'首页-空间-全屋套餐-列表':'首页-空间-N98套餐-列表'
					this.addFoot(name)
				}
				if(this.is_shelf){
					let name = this.type==1?'货架-全屋套餐-列表':'货架-N98套餐-列表'
					this.addFoot(name)
				}
			}
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					let name = this.type==1?'首页-空间-全屋套餐-列表':'首页-空间-N98套餐-列表'
					this.addFoot(name)
				}
				if(this.is_shelf){
					let name = this.type==1?'货架-全屋套餐-列表':'货架-N98套餐-列表'
					this.addFoot(name)
				}
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
	}
	.package{
		padding-top: 1rpx;
		.package-nav{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			border-bottom: solid 1px #EEE;
			.customTabs{
				padding: 20rpx 30rpx;
				background-color: #FFF;
				/deep/ .u-tab-item{
					border-radius: 22rpx;
					height: 44rpx;
					line-height: 44rpx;
				}
			}
			.price-sort{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFF;
				border-bottom: solid 1px #EEE;
				.price-sort-item{
					color: #808080;
					transition: all .2s;
					font-size: 28rpx;
					padding: 0 40rpx;
					line-height: 80rpx;
					&.active{
						font-size: 32rpx;
						color: #141414;
						font-weight: bold;
						position: relative;
						&::after{
							position: absolute;
							content: '';
							width: 24rpx;
							height: 6rpx;
							border-radius: 3rpx;
							background-color: #141414;
							bottom: 2rpx;
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
		}
	}
	.n98-package{
		padding: 220rpx 30rpx 0;
		.package-price-lev{
			padding: 30rpx 0;
			height: 105rpx;
			text{
				display: inline-block;
				vertical-align: middle;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 4rpx;
				color: #666;
				padding: 0 15rpx;
				background-color: #FFF;
				margin-right: 20rpx;
				&.active{
					color: #F59359;
				}
			}
		}
		.n98-package-item{
			box-shadow: 0px 1rpx 40rpx 0px rgba(40,34,31,0.08);
			border-radius: 8rpx;
			margin-bottom: 60rpx;
			background-color: #FFF;
			position: relative;
			z-index: 1;
			&:last-child{
				margin-bottom: 0;
			}
			&.padding{
				padding-top: 20rpx;
			}
			.n98-package-goods-list{
				padding: 0 30rpx;
				.n98-package-goods{
					white-space: nowrap;
					margin: 30rpx 0 0;
					.n98-package-goods-item{
						display: inline-block;
						width: 144rpx;
						height: 144rpx;
						margin-right: 20rpx;
						&:last-child{
							margin-right: 0;
						}
						image{
							width: 144rpx;
							height: 144rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
		.mainImg{
			width: 100%;
			border-radius: 8rpx 8rpx 0 0;
		}
		.n98-package-item-bot{
			display: flex;
			align-items: center;
			padding: 30rpx;
		}
		.n98-package-item-bot-info{
			flex: 1;
			min-width: 0;
		}
		.n98-package-item-bot-info-tit{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 32rpx;
			color: #222;
			text{
				display: inline-block;
				vertical-align: middle;
				font-size: 20rpx;
				height: 35rpx;
				line-height: 35rpx;
				border-radius: 4rpx;
				padding: 0 10rpx;
				margin: -4rpx 10rpx 0 0;
				&.level_id_1{
					color: #F59359;
					background-color: #FEF7F2;
				}
				&.level_id_2{
					color: #141414;
					background-color: #F1D594;
				}
				&.level_id_3{
					color: #141414;
					background-color: #FED4AC;
				}
			}
		}
		.n98-package-item-bot-info-price{
			font-size: 22rpx;
			color: #666260;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.orange{
				color: #F59359;
				.label{
					color: #757575;
					font-size: 24rpx;
				}
			}
			.price{
				font-size: 28rpx;
				margin-right: 20rpx;
			}
			image{
				width: 16rpx;
				height: 16rpx;
				margin-left: 10rpx;
				vertical-align: middle;
			}
		}
		.n98-package-item-bot-info-arrow{
			height: 52rpx;
			line-height: 52rpx;
			background-color: #F59359;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #FFF;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
		}
		.n98-package-item-bot-info-arrow image{
			width: 16rpx;
			height: 22rpx;
			margin-left: 10rpx;
		}
	}
</style>
